<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body {
  font-family: arial, Verdana;
  font-size: 12px;
  width: auto;
  overflow: visible;
  margin-bottom: 2px;
}
.menu {
  color: #3d5d6a;
  line-height: 26px;
  text-indent: .5em;
  float: left;
  white-space: nowrap;
  background-repeat: no-repeat no-repeat;
  background-position: 6px 5px;
}
.text {
  float: left;
  margin-left: 26px;
}
.shortcut {
  color: #A1A192;
  float: left;
  margin-left: 26px;
  display: none;
}
.menuI {
  display: none;
}
ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
}
li {
  list-style: none;
  cursor: pointer;
  margin: 0px;
  padding: 0px;
  clear: both;
  overflow: hidden;
  border: 1px solid white;
}
li:hover {
  border-radius: 3px 3px;
  background: -webkit-gradient(linear, left top, left bottom,
      color-stop(0, #fff),  color-stop(0.4, hsl(215, 67%, 97%)),
      color-stop(0.41, hsl(213, 48%, 95%)));
  border: solid 1px #c5cdd3;
}
#loadDiv {
  color: #3d5d6a;
  display: none;
  font-weight: bold;
  font-family: Verdana, simsun;
  font-size: 12px;
  margin-top: 20px;
  line-height: 40px;
  text-align: center;
}
#tip {
  color: #3d5d6a;
  font-size: 12px;
  font-family: Verdana, simsun;
  text-align: left;
}
.separator {
  display: none;
  width: 100%;
  border-top: 1px solid #ddd;
  margin: 5px 0;
}
#option {
  display: none;
}
#optionItem {
  margin-left: 26px;
}
</style>
<script src="hotkey_storage.js"></script>
<script type='text/javascript'>

  function $(id) {
    return document.getElementById(id);
  }

  function isWindowsOrLinuxPlatform() {
    return navigator.userAgent.toLowerCase().indexOf('windows') > -1 ||
        navigator.userAgent.toLowerCase().indexOf('linux') > -1;
  }

  var isWindowsOrLinux = isWindowsOrLinuxPlatform();

  chrome.extension.onRequest.addListener(function(request, sender, response) {
    if (request.msg == 'page_capturable') {
      $('tip').style.display = 'none';
      $('captureSpecialPageItem').style.display = 'none';
      if (isWindowsOrLinux)
        $('captureScreenItem').style.display = 'block';
      $('captureWindowItem').style.display = 'block';
      $('captureAreaItem').style.display = 'block';
      $('captureWebpageItem').style.display = 'block';
    } else if (request.msg == 'page_uncapturable') {
      i18nReplace('tip', 'special');
      if (isWindowsOrLinux) {
        $('captureScreenItem').style.display = 'block';
        $('tip').style.display = 'none';
      } else {
        $('tip').style.display = 'block';
      }
      $('captureSpecialPageItem').style.display = 'none';
      $('captureWindowItem').style.display = 'none';
      $('captureAreaItem').style.display = 'none';
      $('captureWebpageItem').style.display = 'none';
    }
  });

  function toDo(what) {
    var bg = chrome.extension.getBackgroundPage();
    switch (what) {
      case 'capture_screen':
        bg.screenshot.captureScreen();
        window.close();
        break;
      case 'capture_window':
        bg.screenshot.captureWindow();
        window.close();
        break;
      case 'capture_area':
        bg.screenshot.showSelectionArea();
        window.close();
        break;
      case 'capture_webpage':
        bg.screenshot.captureWebpage();
        $('loadDiv').style.display = 'block';
        $('item').style.display = 'none';
        break;
      case 'capture_special_page':
        bg.screenshot.captureSpecialPage();
        window.close();
        break;
    }
  }

  function i18nReplace(id, name) {
    return $(id).innerHTML = chrome.i18n.getMessage(name);
  }

  function resizeDivWidth(id, width) {
    $(id).style.width = width + "px";
  }

  function init() {
    i18nReplace('captureSpecialPageText', 'capture_window');
    i18nReplace('capturing', 'capturing');
    i18nReplace('captureScreenText', 'capture_screen');
    i18nReplace('captureWindowText', 'capture_window');
    i18nReplace('captureAreaText', 'capture_area');
    i18nReplace('captureWebpageText', 'capture_webpage');
    i18nReplace('optionItem', 'option');

    $('option').addEventListener('click', function () {
      chrome.tabs.create({ url: 'options.html'});
    }, false);
    if (HotKey.isEnabled()) {
      $('captureWindowShortcut').style.display = 'inline';
      $('captureAreaShortcut').style.display = 'inline';
      $('captureWebpageShortcut').style.display = 'inline';
      if (isWindowsOrLinux)
        $('captureScreenShortcut').style.display = 'inline';
      document.body.style.minWidth = "190px"
    } else {
      $('captureWindowShortcut').style.display = 'none';
      $('captureAreaShortcut').style.display = 'none';
      $('captureWebpageShortcut').style.display = 'none';
      if (isWindowsOrLinux)
        $('captureScreenShortcut').style.display = 'none';
      document.body.style.minWidth = "140px";
    }
    var isScriptLoad = false;
    chrome.tabs.getSelected(null, function(tab) {
      if (tab.url.indexOf('chrome') == 0 || tab.url.indexOf('about') == 0) {
        i18nReplace('tip', 'special');
        if (isWindowsOrLinux) {
          $('captureScreenItem').style.display = 'block';
          $('tip').style.display = 'none';
        }
        return;
      } else {
        $('tip').style.display = 'none';
        $('captureSpecialPageItem').style.display = 'block';
        if (isWindowsOrLinux)
          $('captureScreenItem').style.display = 'block';
        showOption();
      }
      chrome.tabs.sendRequest(tab.id, {msg: 'is_page_capturable'},
        function(response) {
          isScriptLoad = true;
          if (response.msg == 'capturable') {
            $('tip').style.display = 'none';
            if (isWindowsOrLinux)
              $('captureScreenItem').style.display = 'block';
            $('captureSpecialPageItem').style.display = 'none';
            $('captureWindowItem').style.display = 'block';
            $('captureAreaItem').style.display = 'block';
            $('captureWebpageItem').style.display = 'block';
            var textWidth = $('captureWindowText')['scrollWidth'];
            resizeDivWidth('captureWindowText', textWidth);
            resizeDivWidth('captureAreaText', textWidth);
            resizeDivWidth('captureWebpageText', textWidth);
            var bg = chrome.extension.getBackgroundPage();
            if (bg.screenshot.isThisPlatform('mac')) {
              $('captureAreaShortcut').innerText = '\u2325\u2318R';
              $('captureWindowShortcut').innerText = '\u2325\u2318V';
              $('captureWebpageShortcut').innerText = '\u2325\u2318H';
            }
          } else if (response.msg == 'uncapturable') {
            i18nReplace('tip', 'special');
            if (isWindowsOrLinux) {
              $('captureScreenItem').style.display = 'block';
              $('tip').style.display = 'none';
            } else {
              $('tip').style.display = 'block';
            }
          } else {
            i18nReplace('tip', 'loading');
          }
        });
    });
    chrome.tabs.executeScript(null, {file: 'isLoad.js'});
    var insertScript = function() {
      if (isScriptLoad == false) {
        chrome.tabs.getSelected(null, function(tab) {
          if (tab.url.indexOf('chrome') == 0 || 
              tab.url.indexOf('about') == 0) {
            i18nReplace('tip', 'special');
          } else {
            $('tip').style.display = 'none';
            $('captureSpecialPageItem').style.display = 'block';
            showOption();
          }
        });
        if (isWindowsOrLinux) {
          $('captureScreenItem').style.display = 'block';
          $('tip').style.display = 'none';
        }
      }
      var captureItems = document.querySelectorAll('li.menuI');
      var showSeparator = false;
      for (var i = 0; i < captureItems.length; i++) {
        if (window.getComputedStyle(captureItems[i]).display != 'none') {
          showSeparator = true;
          break;
        }
      }
      $('separatorItem').style.display = showSeparator ? 'block' : 'none';
    }
    setTimeout(insertScript, 500);

    // Update hot key.
    if (HotKey.get('area') != '@')
      $('captureAreaShortcut').innerText = 'Ctrl+Alt+' + HotKey.get('area');
    if (HotKey.get('viewport') != '@') {
      $('captureWindowShortcut').innerText = 'Ctrl+Alt+' +
          HotKey.get('viewport');
    }
    if (HotKey.get('fullpage') != '@') {
      $('captureWebpageShortcut').innerText ='Ctrl+Alt+' +
          HotKey.get('fullpage');
    }
    if (HotKey.get('screen') != '@')
      $('captureScreenShortcut').innerText = 'Ctrl+Alt+' + HotKey.get('screen');

    if (isWindowsOrLinux) {
      showOption();
    }
  }

  function showOption() {
    $('option').style.display = 'block';
    $('separatorItem').style.display = 'block';
  }
</script>
</head>
<body onload="init()">
  <div id="loadDiv" ><img src="images/loading.gif" alt="">
    <div id="capturing"></div>
  </div>
  <div id="tip"></div>
  <div id="item">
  <ul>
    <li id="captureSpecialPageItem" class="menuI" onclick="toDo('capture_special_page');">
      <div class="menu" id="captureSpecialPage"
        style="background-image: url(images/screen.png);">
        <span class="text" id="captureSpecialPageText"></span>
      </div>
    </li>
    <li id="captureAreaItem" class="menuI" onclick="toDo('capture_area');">
      <div class="menu" id="captureArea"
        style="background-image: url(images/custom.png);">
        <span class="text" id="captureAreaText"></span>
        <span class="shortcut" id="captureAreaShortcut"></span>
      </div>
    </li>
    <li id="captureWindowItem" class="menuI" onclick="toDo('capture_window');">
      <div class="menu" id="captureWindow"
        style="background-image: url(images/screen.png);">
        <span class="text" id="captureWindowText"></span>
        <span class="shortcut" id="captureWindowShortcut"></span>
      </div>
    </li>
    <li id="captureWebpageItem" class="menuI" onclick="toDo('capture_webpage');">
      <div class="menu" id="captureWebpage"
        style="background-image: url(images/whole.png);">
        <span class="text" id="captureWebpageText"></span>
        <span class="shortcut" id="captureWebpageShortcut"</span>
      </div>
    </li>
    <li id="captureScreenItem" class="menuI" onclick="toDo('capture_screen');">
      <div class="menu" id="captureScreen"
        style="background-image: url(images/region.png);">
        <span class="text" id="captureScreenText"></span>
        <span class="shortcut" id="captureScreenShortcut"></span>
      </div>
    </li>
    <div id="separatorItem" class="separator"></div>
    <li id="option">
      <div id="optionItem" class="menu"></div>
    </li>
  </ul>
  </div>
</body>
</html>

